Creating Dynamic Menus

Creating DHTML Drop Menus

This technique relates to the following sections of the guidelines:

Task:

Create a fully accessible DHTML drop menu

Baseline Implications:

See example specific baseline information below.

Many Web developers want to create menus which function similar to operating system menus. The menus consist of a series of items which the user selects to perform an action. Menus are often presented horizontally across the top of a page. Selecting on a menu item may drop down an additional list of menu choices or it may execute a particular action. Menus may also be arranged vertically. Menus which display additional items are often referred to as drop-down or pop-up menus because the menu items display on top of other information on the page.

The intent of this technique is not to provide "cut and paste" code to create a fully accessible menu. The requirements of an accessible menu are described and links provided to examples on the web.

Accessible Menu Requirements

All of the menus must be accessible via the keyboard. The user can navigate to and operate all of the menu items using only the keyboard. GL 2.1 L1 SC 1
Using a screen reader all of the menu items are spoken and can be invoked. GL 2.4 L3 SC1
The menu items must be accessed in an order that makes sense. The user can sequentially navigate from one item to the next and can traverse the associated menus in a logical order. GL 2.4 L1 SC1

Example 1:

The following sites provide accessible menu examples. Please note any copyright notices at these sites.

Accessible Website Menu

Ultimate Drop Down Menu 4.44 by Brothercake

Editorial Note: We will be checking with Brothercake to ensure he is comfortable with referencing his example in this manner before publishing this technique in a working draft

Baseline Implications:

If your baseline includes HTML 4.01, this technique is sufficient to satisfy GL 2.1 L1 SC1, GL 2.4 L1 SC1, and GL 2.4 L3 SC 1

Example 2:

Accessible DHTML Technology Preview provides a menu example that works with recent browser versions, IE 5 and above and Firefox 1.5. And will work with some screen readers in Firefox 1.5. It is an example of the DHTML Roadmap technologies (@@needs link) being put forward by the WAI Protocols and Formats group.

Baseline Implications:

If your baseline includes JavaScript and CSS , this technique is sufficient to satisfy GL 2.1 L1 SC1, GL 2.4 L1 SC1, and GL 2.4 L3 SC 1
If your baseline does not include JavaScript nor CSS , this technique is not recommended.

Editorial Note: This site provides a working menu example but does not have specific instructions for creating it. A developer would have to save the sample and perform a view source to examine the code. It may need more work before being included as an example.

Testing Procedures:

Test the page using the keyboard.
- Load the page. Verify that all of the menu items can be focused and activated via the keyboard.
- Make certain that the order of focus of the items is logical and sequential. For example, make certain menu items can be navigated to sequentially and focus does not randomly jump from item to item.
- Verify that any drop down/pop-up menus are properly closed when they lose focus and do not remain visible on the page when they are no longer active.
Test the page using the mouse.
- Load the page. Verify that all of the menu items can be focused and activated via the mouse.
- Verify that any drop down/pop-up menus are properly closed when they lose focus and do not remain visible on the page when they are no longer active.
Test the page with a screen reader.
- Load the page. Verify that all of the menu items can be focused and activated using the screen reader.
- Verify that the function of each menu item is spoken and the user knows what action will be performed when the item is activated.